import { Select, SelectProps } from "antd";
import { Theme } from "../../theme";

const FontSizeSelect = (props: SelectProps) => {
  return (
    <Select
      style={{ width: 70, verticalAlign: "middle", marginRight: 10 }}
      showSearch
      allowClear
      options={[10, 12, 14, 16, 20, 24, 32].map((n) => ({
        label: `${n}px`,
        value: n
      }))}
      {...props}
    />
  );
};

const COLOR_SERIES = [
  {
    name: "默认",
    color: ["#516b91", "#59c4e6", "#edafda", "#93b7e3", "#a5e7f0", "#cbb0e3"]
  },
  {
    name: "暗黑",
    color: ["#dd6b66", "#759aa0", "#e69d87", "#8dc1a9", "#ea7e53", "#eedd78"]
  },
  {
    name: "语雀",
    color: ["#4ea397", "#22c3aa", "#7bd9a5", "#d0648a", "#f58db2", "#f2b3c9"]
  }
];

const getSeriesColor = (theme: Theme) =>
  COLOR_SERIES.find((s) => s.name === theme)?.color || [];

const ColorSeriesSelect = (props: SelectProps) => {
  return (
    <Select
      showSearch
      options={COLOR_SERIES.map((cs) => ({
        label: (
          <div
            style={{
              display: "flex",
              justifyContent: "space-between",
              alignItems: "center"
            }}
          >
            <span>{cs.name}</span>
            <div style={{ width: 60, height: 10, display: "flex" }}>
              {cs.color.map((c) => (
                <div key={c} style={{ width: 10, height: 10, background: c }} />
              ))}
            </div>
          </div>
        ),
        value: cs.name
      }))}
      {...props}
    />
  );
};

export { FontSizeSelect, ColorSeriesSelect, getSeriesColor as getSeriesCOlor };
